<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>爱公交app管理平台</title>
    <style>
        * {
            margin: 0;
            padding: 0
        }

        a {
            text-decoration: none;
        }

        li {
            list-style: none;
        }
    </style>
    <link rel="stylesheet" href="../static/css/index.css">

</head>

<body>
    <div id="app">
        <el-container>
            <el-aside width="200px" >
                <el-menu :default-openeds="['4']"
                >
                    <el-submenu index="1">
                         <template slot="title"><i class="el-icon-message"></i>用户管理</template>
                         <el-menu-item-group>
                             <el-menu-item index="2-1"><a href='main1'>用户列表</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="el-icon-menu"></i>日志管理</template>
                        <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='log'>系统日志</a> </el-menu-item>
                            <el-menu-item index="2-2"><a href='feedback'>反馈信息</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="el-icon-setting"></i>路线及公交观测</template>
                         <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='roadbus'>系统观测</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title"><i class="el-icon-menu"></i>公交车次管理</template>
                         <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='bustime'>车次信息</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="el-icon-menu"></i>公告管理</template>
                         <el-menu-item-group>
                            <el-menu-item index="2-1"><a href='announcement'>公告发布</a> </el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-container>
                <el-header style="text-align: right; font-size: 20px">
                    <span style="text-align: left; font-size: 20px">公交车次</span>
                    <el-dropdown style="text-align: right; font-size: 20px">
                        <i class="el-icon-setting" style="margin-right: 20px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>我的信息</el-dropdown-item>
                            <el-dropdown-item>管理员们</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span style="text-align: right; font-size: 20px">王小虎</span>
                </el-header>

                <el-main>
                    <el-table :data="tableData" style="width: 100%" max-height="100%">
                        <el-table-column fixed prop="id" label="车次" width="150">
                        </el-table-column>
                        <el-table-column prop="name" label="早末班时间" width="120">
                        </el-table-column>
                        <el-table-column prop="u-name" label="路线" width="120">
                        </el-table-column>
                        <el-table-column prop="key" label="发车间隔" width="120">
                        </el-table-column>
                        <el-table-column prop="iphone" label="路线公交数量" width="120">
                        </el-table-column>
                        <el-table-column fixed="right" label="操作" width="120">
                            <template slot-scope="scope" style="text-align: left">
                                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)"  type="text"
                                    size="small">
                                    移除
                                </el-button>
                                <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text"
                                    size="small">
                                </el-button>
                                <el-button @click.native.prevent="update(scope.$index, tableData)" type="text"
                                    size="small">
                                    修改
                                </el-button>
                                <el-button @click.native.prevent="add(scope.$index, tableData)" type="text"
                                    size="small">
                                    添加
                                </el-button>
                            </template>
                        </el-table-column>

                    </el-table>
                </el-main>
            </el-container>


        </el-container>

    </div>
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/index.js"></script>
    <script>
        let vm = new Vue({
            el: '#app',
            data() {

                return {
                    item: {
                        title: '标题',
                        item: {

                        }
                    },
                    active: 0,
                    tableData: [{
                        name: '李小冉',
                    }, {

                        name: '王小虎',

                    }, {
                        name: '王小虎',
                    }, {
                        name: '王小虎',
                    }, {

                        name: '王小虎',
                    }, {
                        name: '王小虎',
                    }, {
                        name: '王小虎',
                    }]
                }
            },
            methods: {
                deleteRow(index, rows) {
                    rows.splice(index, 1);
                },
                update(){},
                add(){},
                next() {
                    if (this.active++ > 2) this.active = 0;
                }
            },

        })
    </script>
    <style scoped>
        .el-header {
            height: 60px;
            font-size: 20px;
            line-height: 60px;
            color: #333;
            background-color: #b3c0d1;
        }

        .el-container {
            height: 100% ;
        }

        .el-aside {
            height: 100vh;
        }

        .el-menu {
            background: #b3c0d1;;
            height: 100%;
        }
        .el-button+.el-button {
            margin-left: 2px;
        }
    </style>
</body>

</html>